<template>
  <div class="intro_box">
    <img :src="user.avatar || img" />
    <div class="user_name">{{user.nickname || '该用户还没有昵称'}}</div>
    <ul class="uls">
      <li>文章<i>{{usero || '0'}}</i></li>
      <li>点赞<i>{{usert || '0'}}</i></li>
      <li>评论<i>{{users || '0'}}</i></li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyList',
  data () {
    return {
      img: require('../../../assets/images/touxiang.gif')
    }
  },
  computed: {
    ...mapState({
      user: 'myHome'
    }),
    usero () {
      return this.user.users['COUNT(id)']
    },
    usert () {
      return this.user.users['SUM(zan_size)']
    },
    users () {
      return this.user.users['SUM(comment_size)']
    }
  }
}
</script>

<style lang="stylus" scoped>
  .intro_box{
    position: relative
    width: 270px
    height: 250px
    content: " "
    display: table
    clear: both
    background-color: rgb(255,255,255)
    img{
      margin-left: 70px
      margin-top: 20px
      width: 140px
      height: 140px
      border-radius: 50%
    }
    .user_name{
      width: 90%
      height: 40px
      font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
      text-align: center
      line-height: 40px
      font-size: .45rem
      margin-left: 4.5%
      margin-top: .1rem
    }
    .uls{
      list-style: none
      padding: 0
      margin: 0
      width: 100%
      height: auto
      li{
        position: relative
        font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
        line-height: 50px
        cursor: default
        padding-left: .35rem
        font-weight: bold
        box-sizing: border-box
        width: 100%
        height: 50px
        border-top: 1px solid rgb(220,220,220)
        i{
          display: inline-block
          position: absolute
          right: 10px
          color: rgb(15,153,213)
          cursor: default
        }
      }
    }
  }
</style>
